/* 
	厂区工艺图
 */
const template = `
	<div class="gy">
		<van-nav-bar
		  :title="title"
		  left-arrow
			left-text="首页"
			@click-left="onBack"
			right-text="列表"
			@click-right="onGyList"
		/>
		<div class="gy-img" style="background-image: url(../../img/gy/MAIN.png);"></div>
		<div class="data-panel">
			<ul>
				<li v-for="(item,index) in pointList" :key="index" class="point-item">
					<span class="point-name">{{ item.name }}</span>
					<span class="point-value-wrapper">
						<span class="point-value">{{ item.value }}</span>
						<span class="point-unit">{{ item.unit }}</span>
					</span>
				</li>
			</ul>
		</div>
		<div class="data-panel" style="right: -10px;left: unset;">
			<ul>
				<li v-for="(item,index) in pointList2" :key="index" class="point-item">
					<span class="point-name">{{ item.name }}</span>
					<span class="point-value-wrapper">
						<span class="point-value">{{ item.value }}</span>
						<span class="point-unit">{{ item.unit }}</span>
					</span>
				</li>
			</ul>
		</div>
		
		<div class="gy-list" :class="{ show: gyListShow }">
			<div v-for="(item,index) in gyList" :key="index" class="gy-list__item">
				<a class="gy-list__item-name" @click="toGy(item.path)">{{ item.name }}</a>
			</div>
		</div>
		
		<van-overlay :show="overlayShow" @click="gyListShow = false" />
		
	</div>
`;
export default {
	created() {
		
		this.getRealtimeData();
		this.getRealtimeDataTimer = setInterval(this.getRealtimeData, 30 * 1000);
		
	},
	
	mounted() {
		// 横屏
		this.$el.classList.add('horizontal');
		// body元素边界信息
		let rect = document.body.getBoundingClientRect();
		this.$el.style.width = Math.floor(rect.height) + 'px';
		this.$el.style.height = Math.floor(rect.width) + 'px';
		this.$el.style.transform = `translate(-50%,-50%) rotate(90deg)`;
		
	},
	destroyed() {
		this.$el.classList.remove('horizontal');
		clearInterval(this.getRealtimeDataTimer);
		this.getRealtimeDataTimer = null;
	},
	data() {
		return {
			title: '在线数据',
			pointList: [
				{
					name: '进水温度',
					code: 'XLS_SSBF_AT30001TT_IN',
					value: 0,
					unit: '',
				},
				{
					name: '取水浊度',
					code: 'XLS_SSBF_TuT30001_IN',
					value: 0,
					unit: '',
				}, 
				{
					name: '取水电导率',
					code: 'XLS_SSBF_CT30001_IN',
					value: 0,
					unit: '',
				}, 
				{
					name: '取水PH',
					code: 'XLS_SSBF_AT30001PH_IN',
					value: 0,
					unit: '',
				}, 
				{
					name: '取水溶解氧',
					code: 'XLS_SSBF_AT30002_IN',
					value: 0,
					unit: '',
				}, {
					name: '取水氨氮',
					code: 'XLS_SSBF_AT30003_IN',
					value: 0,
					unit: '',
				}, {
					name: '取水高锰酸盐指数',
					code: 'XLS_SSBF_AT30004_IN',
					value: 0,
					unit: '',
				}, 
			],
			pointList2: [
				{
					name: '出水温度',
					code: 'XLS_SSBF_TT30002_IN',
					value: 0,
					unit: '',
				},{
					name: '出厂水浊度',
					code: 'XLS_SSBF_TuT30401_IN',
					value: 0,
					unit: '',
				},{
					name: '出厂水余氧',
					code: 'XLS_SSBF_AT30401_IN',
					value: 0,
					unit: '',
				},{
					name: '出厂水PH',
					code: 'XLS_SSBF_AT30402_IN',
					value: 0,
					unit: '',
				},{
					name: '出厂水氨氮',
					code: 'XLS_SSBF_AT30403_IN',
					value: 0,
					unit: '',
				},
			],
			
			gyList: [
				{
					name: '浓缩池',
					path: '/main/nsc',
				}, {
					name: '沉淀池',
					path: '/main/xncdc',
				}, {
					name: '砂滤车间',
					path: '/main/slc',
				}, {
					name: '清水池',
					path: '/main/qsc',
				}, {
					name: '送水泵房',
					path: '/main/ejbz',
				}, {
					name: '加药间',
					path: '/main/jyj',
				}, {
					name: '脱泥加药间',
					path: '/main/tnjyj',
				}, {
					name: '排泥水调节池',
					path: '/main/pnstjc',
				}, {
					name: '取水泵房',
					path: '/main/ysbf',
				}, 
			],
			gyListShow: false,
			getRealtimeDataTimer: null,
		}
	},
	computed: {
		overlayShow() {
			return this.gyListShow;
		}
	},
	methods: {
		// 获取实时数据
		getRealtimeData() {
			axios.post(`/realtime/getRealtimeData.do`).then(resp => {
				if(resp.status === 200) {
					let realtimeData = resp.data;
					this.asyncData(this.pointList, realtimeData);
					this.asyncData(this.pointList2, realtimeData);
				}
			})
		},
		asyncData(pointList, realtimeData) {
			pointList.forEach((v,i) => {
				let point = realtimeData[v.code];
				if(point) {
					pointList[i].value = point.valueFormat;
					v.unit = point.unit;
				} 
			});
		},
		onGyList() {
			this.gyListShow = true;
			this.overlayShow = true;
		},
		toGy(path) {
			this.$router.push(path);
		},
		onBack() {
			this.$router.push('/main');
		},
	},
	template,
	
}